<template>
  <div>
    <div class="demo-input-suffix" style="margin: 10px 30px 20px ">
      文章标题：
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        style="width: 200px"
      >
      </el-input>
    </div>

    <div class="demo-input-suffix" style="margin: 10px 30px 20px ">
      文章来源：
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        style="width: 200px"
      >
      </el-input>
    </div>

    <div class="demo-input-suffix" style="margin: 10px 30px 20px ">
      所属类别：
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>


    <el-card style="height: 610px;margin-bottom: 20px">
      <p style="font-weight: bolder">文章内容：</p>
      <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
        <!-- 自定义toolar -->
        <div id="toolbar" slot="toolbar">
          <!-- Add a bold button -->
          <button class="ql-bold" title="加粗">Bold</button>
          <button class="ql-italic" title="斜体">Italic</button>
          <button class="ql-underline" title="下划线">underline</button>
          <button class="ql-strike" title="删除线">strike</button>
          <button class="ql-blockquote" title="引用"></button>
          <button class="ql-code-block" title="代码"></button>
          <button class="ql-header" value="1" title="标题1"></button>
          <button class="ql-header" value="2" title="标题2"></button>
          <!--Add list -->
          <button class="ql-list" value="ordered" title="有序列表"></button>
          <button class="ql-list" value="bullet" title="无序列表"></button>
          <!-- Add font size dropdown -->
          <select class="ql-header" title="段落格式">
            <option selected>段落</option>
            <option value="1">标题1</option>
            <option value="2">标题2</option>
            <option value="3">标题3</option>
            <option value="4">标题4</option>
            <option value="5">标题5</option>
            <option value="6">标题6</option>
          </select>
          <select class="ql-size" title="字体大小">
            <option value="10px">10px</option>
            <option value="12px">12px</option>
            <option value="14px">14px</option>
            <option value="16px" selected>16px</option>
            <option value="18px">18px</option>
            <option value="20px">20px</option>
          </select>
          <select class="ql-font" title="字体">
            <option value="SimSun">宋体</option>
            <option value="SimHei">黑体</option>
            <option value="Microsoft-YaHei">微软雅黑</option>
            <option value="KaiTi">楷体</option>
            <option value="FangSong">仿宋</option>
            <option value="Arial">Arial</option>
          </select>
          <!-- Add subscript and superscript buttons -->
          <select class="ql-color" value="color" title="字体颜色"></select>
          <select class="ql-background" value="background" title="背景颜色"></select>
          <select class="ql-align" value="align" title="对齐"></select>
          <button class="ql-clean" title="还原"></button>
          <!-- You can also add your own -->
          <button class="ql-link" title="超链接"></button>
          <button class="ql-image" title="照片"></button>
          <button class="ql-video" title="视频"></button>

        </div>
      </quill-editor>
    </el-card>

    <div class="option" style="text-align: right;margin-bottom: 20px;margin-right: 20px">
      <el-button type="success"  @click="preview()">预览</el-button>
      <el-button type="primary" >发布</el-button>
      <el-button type="danger"  >清空</el-button>
    </div>
  </div>
</template>

<script>
  import {
    Quill,
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  //引入font.css
  import '../../../assets/css/font.css'

  // 自定义字体大小
  let Size = Quill.import('attributors/style/size')
  Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
  Quill.register(Size, true)

  // 自定义字体类型
  var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
    '宋体', '黑体'
  ]
  var Font = Quill.import('formats/font')
  Font.whitelist = fonts
  Quill.register(Font, true)

  export default {
    name: 'FuncFormsEdit',
    components: {
      quillEditor
    },
    data() {
      return {
        content: null,
        editorOption: {
          placeholder: "请输入",
          theme: "snow", // or 'bubble'
          modules: {
            toolbar: {
              container: '#toolbar'
            }
          }
        },
        options: [{
          value: '选项1',
          label: '四史学习'
        }, {
          value: '选项2',
          label: '统战条例解读'
        }, {
          value: '选项3',
          label: '新型党政关系相关论述'
        }, {
          value: '选项4',
          label: '国家大正方针公布'
        }, {
          value: '选项5',
          label: '社会热点问题解析'
        }],
        value: ''
      }
    },
    methods: {
      preview() {
        window.open('news_xq.html', '_blank')
      }
    }
  }
</script>

<style scoped>
</style>
